<template>
  <div class="school-map">
    <ul class="bread">
      <li v-for="(item, index) in administrativeRegions" :key="item.key">
        <span class="name" @click="chooseMap(item)">{{ item.name }}</span>
        <span v-if="index + 1 < 5 && administrativeRegions[index + 1].name" class="arrow">></span>
      </li>
    </ul>
    <template v-if="showLoading">
      <div class="spinloading">
        <Spin size="large"></Spin>
      </div>
    </template>

    <TheMap
      :areaType="$store.state.currentArea"
      @clickProvince="clickProvince"
      ref="themap"
      @clickCity="clickCity"
      @clickCounty="clickCounty"
      :mapDatas="mapDatas"
    />
    <div v-if="showModal" class="map-modal">
      <!-- <span class="close" @click="closeModal">X</span> -->
      <div class="lists">
        <div class="container">
          <template v-for="i in countyDataLength" class="container">
            <ul v-if="i <= countyDataLength" :key="i">
              <li
                v-for="(item, index) in countyData.slice(4 * (i - 1), i * 4)"
                :key="index"
                :class="[
                  'normal',
                  index % 4 === 0 ? 'last' : '',
                  schoolName === item.name ? 'is-active' : ''
                ]"
              >
                <span @click="getSchoolInfo(item)">{{ item.name }}</span>
              </li>
            </ul>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
//@ts-nocheck
import TheMap from '@/components/TheMap.vue'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { getStatisticsListApi } from '@/api'
import { Type } from '@/constant'
@Component({
  components: {
    TheMap
  }
})
export default class MapComp extends Vue {
  showLoading = true
  provinceID?: number
  cityCode?: number
  showModal = false
  schoolName = ''
  mapDatas: Array<any> = []
  countyData: Array<any> = []
  countyDataLength = 0
  schoolData: Array<any> = []
  administrativeRegions: Array<Record<string, any>> = [
    {
      name: '全国',
      key: 1
    },
    {
      name: '',
      key: 2
    },
    {
      name: '',
      key: 3
    },
    {
      name: '',
      key: 4
    },
    {
      name: '',
      key: 5
    }
  ]
  created() {
    // this.getStatisticsListFn(Type.Country)
    if (this.$store.state.currentArea === 1) {
      this.getStatisticsListFn(Type.Country)
    } else if (this.$store.state.currentArea === 2) {
      this.getStatisticsListFn(2, this.$store.state.currentProvince)
    } else if (this.$store.state.currentArea === 3) {
      this.getStatisticsListFn(3, this.$store.state.currentProvince, this.$store.state.currentCity)
    } else if (this.$store.state.currentArea === 4) {
      this.getStatisticsListFn(4, this.$store.state.currentProvince, this.$store.state.currentCity, this.$store.state.countyCode)
    } else if (this.$store.state.currentArea === 5) {
      this.getStatisticsListFn(5, this.$store.state.currentProvince, this.$store.state.currentCity, this.$store.state.countyCode, this.$store.state.school_id)
    }
    // new Array(20).fill('育红小学').forEach((item) => {
    // 	this.countyData.push(item)
    // })
  }
  closeModal() {
    this.showModal = false
  }
  async getStatisticsListFn(
    type: number,
    province?: number,
    city?: number,
    area?: number,
    school_id?: number
  ) {
    if (this.$store.state.beginState === 1) {
      if (this.$store.state.currentfixed === 2) {
        this.$set(this.administrativeRegions[1], 'name', this.$store.state.permission_name.province_name[0])
        this.provinceID = this.$store.state.currentProvince
      }else if(this.$store.state.currentfixed === 3) {
        this.$set(this.administrativeRegions[1], 'name', this.$store.state.permission_name.province_name[0])
        this.$set(this.administrativeRegions[2], 'name', this.$store.state.permission_name.city_name[0])
        this.provinceID = this.$store.state.currentProvince
        this.cityCode = this.$store.state.currentCity
      }else if(this.$store.state.currentfixed === 4) {
        this.$set(this.administrativeRegions[1], 'name', this.$store.state.permission_name.province_name[0])
        this.$set(this.administrativeRegions[2], 'name', this.$store.state.permission_name.city_name[0])
        this.$set(this.administrativeRegions[3], 'name', this.$store.state.permission_name.area_name[0])
        this.provinceID = this.$store.state.currentProvince
        this.cityCode = this.$store.state.currentCity
      }else if(this.$store.state.currentfixed === 5) {
        this.$set(this.administrativeRegions[1], 'name', this.$store.state.permission_name.province_name[0])
        this.$set(this.administrativeRegions[2], 'name', this.$store.state.permission_name.city_name[0])
        this.$set(this.administrativeRegions[3], 'name', this.$store.state.permission_name.area_name[0])
        this.$set(this.administrativeRegions[4], 'name', this.$store.state.permission_name.school_name[0])
        this.provinceID = this.$store.state.currentProvince
        this.cityCode = this.$store.state.currentCity
      }
    }
    const { status, data } = await getStatisticsListApi(type, province, city, area, school_id)
    if (type === 4) {
      this.$store.commit('setSchool_listdata',data.school_list)
    }
    try {
      if (status === 200 && !area) {
        this.mapDatas = data.district_student_number
      } else {
        // console.log(JSON.parse(sessionStorage.setItem('vue_admin_template_permission')),'啥啥啥')
        if (this.$store.state.currentfixed === 5) {
          this.showModal = true
          let arryssss = []
          let online_idArry = this.$store.state.online_id
          for(let i = 0;i < online_idArry.length; i++) {
            let objs = {
              id: this.$store.state.online_id[i],
              name: this.$store.state.permission_name.school_name[i],
              school_id: online_idArry[i]
            }
            arryssss.push(objs)
          }
          this.countyData = arryssss
          this.countyDataLength = Math.ceil(arryssss.length / 4)
        }else {
          this.showModal = true
          this.countyData = this.$store.state.school_listdata
          this.countyDataLength = Math.ceil(this.$store.state.school_listdata.length / 4)
        }
        if (data.school_list) {
          this.showModal = true
          this.countyData = data.school_list
          this.countyDataLength = Math.ceil(data.school_list.length / 4)
        }
        // this.showModal = true
        // this.countyData = [{ name: '北京西城区学校', id: 12 }]
        // console.log(this.countyData, data, '村庄数据')
      }
      if (status === 200) {
        this.$store.commit('setAllData', data)
      }
      this.showLoading = false
    } catch (error) {
      console.log('接口报错', error)
    }
  }
  getSchoolInfo(item) {
    this.$store.commit('setSchoolId', item.id)
    this.$set(this.administrativeRegions[4], 'name', item.name)
    this.$store.commit('setCurrentArea', 5)
    this.schoolName = item.name
    this.getStatisticsListFn(
      5,
      this.$store.state.currentProvince,
      this.$store.state.currentCity,
      this.$store.state.countyCode,
      item.id
    )
  }
  clickProvince(province: string, provinceID: number) {
    this.$set(this.administrativeRegions[1], 'name', province)
    this.provinceID = provinceID
  }
  clickCity(cityName: string, cityCode: number) {
    this.$set(this.administrativeRegions[2], 'name', cityName)
    this.cityCode = cityCode
  }
  clickCounty(countyName: string) {
    this.$set(this.administrativeRegions[3], 'name', countyName)
  }
  async chooseMap(item: any) {
    if(item.key >= this.$store.state.currentfixed) {
      this.showLoading = true
      this.$refs.themap.myChart = null
      this.mapDatas = []
       switch (item.key) {
        case 1:
          this.$store.commit('setCurrentArea', 1)
          await this.getStatisticsListFn(1)
          // ref.getChinaMap()
          this.$set(this.administrativeRegions[1], 'name', '')
          this.$set(this.administrativeRegions[2], 'name', '')
          this.$set(this.administrativeRegions[3], 'name', '')
          this.$set(this.administrativeRegions[4], 'name', '')
          this.showModal = false
          this.schoolName = ''
          this.showLoading = false
          break
        case 2:
          this.showModal = false
          this.$store.commit('setCurrentArea', 2)
          this.schoolName = ''
          this.$refs.themap.getProvinceData(
            this.$store.state.currentProvince.toString().substr(0, 2),
            this.mapDatas
          )
          await this.getStatisticsListFn(2, this.$store.state.currentProvince)
          this.$set(this.administrativeRegions[2], 'name', '')
          this.$set(this.administrativeRegions[3], 'name', '')
          this.$set(this.administrativeRegions[4], 'name', '')
          this.showLoading = false
          break
        case 3:
          this.showModal = false
          this.schoolName = ''
          this.$store.commit('setCurrentArea', 3)
          this.$set(this.administrativeRegions[3], 'name', '')
          this.$set(this.administrativeRegions[4], 'name', '')
          await this.getStatisticsListFn(
            3,
            this.$store.state.currentProvince,
            this.$store.state.currentCity
          )
          this.showLoading = false
          break
        case 4:
          this.showModal = false
          this.schoolName = ''
          this.$store.commit('setCurrentArea', 4)
          this.$set(this.administrativeRegions[4], 'name', '')
          await this.getStatisticsListFn(
            4,
            this.$store.state.currentProvince,
            this.$store.state.currentCity,
            this.$store.state.countyCode
          )
          this.showLoading = false
          break
        case 5:
          this.$store.commit('setCurrentArea', 5)
          this.$set(this.administrativeRegions[4], 'name', this.schoolName)
          this.showLoading = false
      }
    }
    // this.showLoading = true
    // this.$refs.themap.myChart = null
    // this.mapDatas = []
    // if (this.$store.state.currentArea === 1) {
  }
  @Watch('$store.state.currentArea', { deep: true })
  handler(val) {
    if (val <= 2) {
      this.$set(this.administrativeRegions[2], 'name', '')
      this.$set(this.administrativeRegions[3], 'name', '')
      this.$set(this.administrativeRegions[4], 'name', '')
      // this.$set(this.administrativeRegions[5], 'name', '')
    }
    if (val === 4) {
      this.$set(this.administrativeRegions[3], 'name', this.$store.state.currentCounty)
    }
  }
}
</script>
<style lang="scss" scoped>
.school-map {
  position: relative;
  display: flex;
  flex: 1;

  .bread {
    position: absolute;
    top: 16px;
    left: 26px;
    z-index: 100;
    display: flex;

    span {
      color: #84c1ff;
    }

    .arrow {
      margin-right: 5px;
      margin-left: 5px;
    }

    .name {
      cursor: pointer;
    }
  }

  .map-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999999;
    width: 660px;
    height: 240px;
    padding: 40px 40px 60px 40px;
    overflow: hidden;
    background-image: url('../../assets/images/modal.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateX(-50%) translateY(-50%);

    ::-webkit-scrollbar {
      width: 6px;
      height: 3px;
    }

    ::-webkit-scrollbar-thumb {
      background: #145ec3;
      border-radius: 4px;
      box-shadow: inset 0 0 5px #00589e;
    }

    ::-webkit-scrollbar-track {
      border-radius: 6px;
      box-shadow: inset 0 0 5px #001f38;
      // background: #0F2E69;
    }

    .lists {
      // overflow: hidden;
      display: flex;
      height: 240px;
      padding-bottom: 30px;
      overflow: auto;
      flex-direction: column;

      .container {
        overflow: auto;

        ul {
          display: flex;
          margin-left: -10px;
          // display: grid;
          // overflow: auto;
          // grid-template-columns: 1fr 1fr 1fr 1fr;
          // column-gap: 20px;
          // row-gap: 30px;

          list-style: none;

          li {
            float: left;
            width: 25%;
            padding-left: 50px;
            margin-bottom: 20px;
            box-sizing: border-box;

            span {
              font-family: PingFangSC-Regular, PingFang SC;
              font-size: 16px;
              font-weight: 600;
              color: #84c1ff;
              white-space: pre-wrap;
              cursor: pointer;
            }

            &.is-active {
              transform: scale(1.08);

              span {
                color: #fff;
              }
            }
          }

          .normal {
            &.last {
              padding-left: 10px;
            }
          }
          // .normal {
          // 	display: flex;
          // 	margin-right: 20px;
          // 	margin-bottom: 20px;
          // 	&.last {
          // 		margin-bottom: 20px;
          // 	}
          // 	span {
          // 		white-space: nowrap;
          // 	}
          // }
        }
      }
    }

    .close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 16px;
      color: #2ba4ff;
      cursor: pointer;
    }
  }

  .spinloading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    background: rgba(19, 19, 19, 1);

    .ivu-spin {
      margin: auto;
    }
  }
}
</style>
